<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>translate实现拖拽</title>
  <script src="../static/js/vue.global.js"></script>
  <style>
    .box{
      width: 100px;
      height: 100px;
      background: #000;
      position: absolute;
      color: #fff;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="box" ref="box">1</div>
</div>
<script>
  const { createApp } = Vue;
  createApp({
    methods: {
      draggable(el) {
        // e.clientX: 鼠标点击的x轴左边（以整个屏幕为坐标系）(e是鼠标对象）
        // el.offsetLeft: 当前元素最左边的距离（以整个屏幕为坐标系）（el是元素对象）

        // 拖拽要监听3个鼠标事件：鼠标点击（mousedown），鼠标移动（mousemove），鼠标按起（mouseup）

        // transform拖拽要实现2步：
        // 1. 找到初始定位：鼠标点击坐标(clientX)，因为采用translate，只需要计算鼠标移动的距离，加上上次的偏移量即可
        // 2. 移动的距离：鼠标移动后的坐标(clientX)-初始位置的坐标(clientX)+上一次移动的translate偏移量
        el.onmousedown = function (event) {
          // 禁止选择文字
          document.onselectstart = () => { return false };
          console.log(event.clientX, el.offsetLeft);
          const translate = document.querySelector('.box').style.transform.replace(/translate\(|(px)|(\)|(\s))/g, '').split(',');

          const initX = event.clientX;
          const initY = event.clientY;
          document.onmousemove = function (event) {
            const x = event.clientX - initX + parseInt(translate[0] ? translate[0] : 0);
            const y = event.clientY - initY + parseInt(translate[1] ? translate[1] : 0);
            el.style.transform = `translate(${x}px, ${y}px)`;
          }
        };
        el.onmouseup = function (event) {
          document.onmousemove = document.onmouseup = null;
          document.onselectstart = null;
        }
      }
    },
    mounted(){
      this.draggable(this.$refs.box)
    }
  }).mount('#app')
</script>
</body>
</html>
